<template>
   <view class="contain">
    <u-navbar
        title="付款"
        :autoBack="true"
        titleStyle="font-weight: bold"
    >
    </u-navbar>
    <view id="wrap" class="wrap" style="background-color: #f6f6f6;"  :style="'margin-top:' + totalHeight + 'px'" >
      <view class="head-wrap">
        <view class="head-ortrait">
          <image :src="mch.logo"></image>
        </view>
        <view class="name-wrap" ref="ggg">
          <text class="name">{{mch.shortName}}{{  mch.linkman | formatName }}</text>
        </view>
      </view>
      <view class="amount">
        <view class="amount-top">
          <view>
            <text class="amount-title">¥</text>
          </view>
          <view id="inputWrpa" class="input-wrpa" style="display: flex;align-items: center;">
            <input @focus="inputFocus"		 @input="inputClick" @blur="Listeningfocus" style="font-size:54rpx;color: black;"   class="amount-input" type="digit"  placeholder-style="color:#cacaca;" placeholder="输入金额" v-model="amount"/>
          </view>
        </view>
        <view class="glide"></view>
<!--        <view style="padding-top: 20rpx;margin-left: 20rpx;display: flex" v-if="token">-->
<!--          <text style="color: grey">会员名称:</text>-->
<!--          <text>{{userInfo.nickname}}</text>-->
<!--        </view>-->
<!--        <view class="amount-bottom">-->
<!--          <view class="saveMoney-wrap">-->
<!--            <text class="saveMoney">周五省钱日</text>-->
<!--          </view>-->
<!--          <view class="saveMoney-title-wrap">-->
<!--            <text class="saveMoney-title">支付宝积分50抵¥0.5,可享3笔</text>-->
<!--          </view>-->
<!--        </view>-->
        <view class="prompt" v-if="token">
          <view class="prompt-item">
            <text class="prompt-item-company">会员名称</text>
            <text class="prompt-item-companyName">{{paymentGetInfo.name}}</text>
          </view>
          <view class="prompt-item">
            <text class="prompt-item-company">会员等级</text>
            <text class="prompt-item-companyName">{{paymentGetInfo.vipName}}</text>
          </view>
          <view class="prompt-item">
            <text class="prompt-item-company">当前可以的会员金额</text>
            <text class="prompt-item-companyName">{{paymentGetInfo.balance}}</text>
          </view>
<!--          <view class="prompt-item">-->
<!--            <text class="prompt-item-company">本次奖励</text>-->
<!--            <text class="prompt-item-companyName" style="color:#ed6020">限量5元寄快递优惠券</text>-->
<!--          </view>-->
        </view>
      </view>
      <view class="remarks" :style="'bottom:'+KeyboardHeight+'px;'">
        <text v-if="inputDialogToggleText != null" class="remarks-text" @click="inputDialogToggle">{{inputDialogToggleText}}</text>
        <text v-if="inputDialogToggleText == ''" class="remarks-text" @click="inputDialogToggle">添加备注</text>
        <view class="payment" id="payment" :style="paymentStyle" @click="paymentClick" v-if="token || amount!='' ">
          <text class="payment-text">付款</text>
        </view>
        <view class="payment payment-view" style="background-color:#1777ff" id="payment" v-if="!token && amount==''" @click="toLogin">
          <button  class="payment-text payment-button"  type="default">申请成为会员</button>
        </view>
      </view>
      <view>
        <uni-popup ref="inputDialog" type="dialog">
          <uni-popup-dialog ref="inputClose"  mode="input" title="添加备注" :value="inputDialogToggleTextTwo"
                            @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
      </view>
    </view>
  </view>
</template>
<script>
  import {mapState} from 'vuex';
  import {
    submit,
    query,
    create, 
  } from "@/api/payment.js"
  import {
    getInfo
  } from "@/api/mch.js"
  import {
    getTokenByCode,
    register
  } from "@/api/user.js"
  import util from '@/static/utils/util'
  export default {
  data() {
    return {
      KeyboardHeight: '',
      amount: '',
      show: false,
      value: '',
      type: 'center',
      msgType: 'success',
      messageText: '这是一条成功提示',
      inputDialogToggleText: '',
      inputDialogToggleTextTwo: '',
      paymentStyle: '',
      sysScroll: '',
      inputWrpa: '',
      avatarUrl: '../../static/logo.png',
      placeholder: '请输入',
      isShow: false,
      cursor: false,
      system: '',
      menu: '',
      statusBarHeight: '',
      menuTop: '',
      navigatorHeight: '',
      totalHeight: '',
      loginStatus: '',
      mch: {},
      paymentClickFlag:true,
      tel:''
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      token: state => state.user.token,
      mchId: state => state.user.mchId,
      uuid: state => state.user.uuid,
      userId: state => state.user.userId,
      paymentGetInfo:state => state.user.paymentGetInfo
    })
  },
  filters: {
    // 姓名格式化
    formatName(str) {
      if (str) {
        return "  (" + str.substr(0, 1) + new Array(str.length).join('*') + ")"
      }
    },
    // 姓名格式化
    formatName2(str) {
      if (str) {
        return new Array(str.length).join("*") + str.substr(str.length - 1, 1);
      }
    },
  },
  mounted() {
    // #ifdef MP-WEIXIN
    uni.onKeyboardHeightChange(res => {
      this.KeyboardHeight = res.height
    })
    // #endif
  },
  onLoad() {
    this.getInfo()
    this.getSystemInfo()
  },
  methods: {
    toLogin(){
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    PhoneNumber(e) {
      var e = e
      var that = this
      // #ifdef MP-WEIXIN
      uni.login({
        provider: 'weixin',
        success: res => {
          var weixinres = res
          console.log(res, "codecodecodecodecode")
          getTokenByCode({
            mchId: that.mchId,
            auth_code: res.code,
            uuid: that.uuid,
            pluginId: 'weixinMiniAuthPlugin'
          }).then(
              res => {
                console.log(res)
                if (res.type == 'success') {
                  res.data.token = null
                  if(res.data.token == null){
                    console.log(weixinres,"weixinresweixinresweixinres")
                    this.$store.commit('callRegister',e);
                  }
                } else {
                  wx.showToast({
                    icon: "none",
                    title: res.content
                  })
                }
              }
          ).catch(error => {
          })
        }
      })
      // #endif
    },
    // // #ifdef MP-ALIPAY
    // uni.requestPayment({
    // 	provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
    // 	orderInfo: this.payInfo.orderNo, // 支付宝订单号
    // 	success: function (res) {
    // 		// DOTO 支付成功后的代码逻辑
    // 	},
    // 	fail: function (err) {
    // 		console.log('fail:' + JSON.stringify(err))
    // 	}
    // })
    // // #endif
    // // #ifdef MP-WEIXIN
    // uni.requestPayment({
    // 	provider: 'wxpay',
    // 	"appId": this.payInfo.appId, //公众号名称，由商户传入
    // 	"timeStamp": this.payInfo.timeStamp, //时间戳
    // 	"nonceStr": this.payInfo.nonceStr, //随机串
    // 	"package": this.payInfo.package, //扩展包
    // 	"signType": "MD5", //微信签名方式:MD5
    // 	"paySign":  this.payInfo.paySign, //微信签名
    // 	success: function (res) {
    // 		console.log('success:' + JSON.stringify(res))
    // 		// DOTO 支付成功后的代码逻辑
    // 	},
    // 	fail: function (err) {
    // 		console.log('fail:' + JSON.stringify(err))
    // 	}
    // })
    // // #endif
    getSystemInfo() {
      //   //获取系统信息
      uni.getSystemInfo({
        success: res => {
          this.system = res
          //获取胶囊信息
          this.menu = uni.getMenuButtonBoundingClientRect()
          //计算组件高度
          this.statusBarHeight = this.system.statusBarHeight //状态栏高度
          this.menuHeight = this.menu.height //胶囊高度
          this.menuTop = this.menu.top //胶囊与顶部的距离
          //导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
          this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height
          //总高度 = 状态栏的高度 + 导航栏高度
          this.totalHeight = this.statusBarHeight + this.navigatorHeight
        }
      })
    },
    getInfo() {
      getInfo(this.mchId).then(
          res => {
            if (res.type == 'success') {
              this.mch = res.data
            }
          })
    },
    paymentClick() {
        if(this.paymentClickFlag == false) {
          return false
        }
        var _this = this
        console.warn(this.token)
        if (this.amount == '') {
          uni.showToast({
            icon: "none",
            title: '付款金额不能为空',
            duration: 2000
          });
          return false
        }
        if (this.amount == 0) {
          uni.showToast({
            icon: "none",
            title: '付款金额不能为0',
            duration: 2000
          });
          return false
        }
        if (this.amount < 0) {
          uni.showToast({
            icon: "none",
            title: '付款金额不能为负数',
            duration: 2000
          });
          return false
        }
      if (this.amount > 20000) {
        uni.showToast({
          icon: "none",
          title: '付款金额不能大于2万',
          duration: 2000
        });
        return false
      }
        this.paymentClickFlag = false
        this.paymentStyle = 'background-color:#bad6fd'
        console.log(this.userId, "1321321321")
        let params = {
          amount: this.amount,
          channel: 'WX_MIN',
          mchId: this.mchId,
          memo: this.inputDialogToggleText,
          userId: this.userId
        }
        create(params).then(res => {
          console.log(res)
          var _this = this
          var sn = res.data.sn
          // #ifdef MP-WEIXIN
          uni.requestPayment({
            provider: 'wxpay',
            "appId": res.data.appId, //公众号名称，由商户传入
            "timeStamp": res.data.timeStamp, //时间戳
            "nonceStr": res.data.nonceStr, //随机串
            "package": res.data.package, //扩展包
            "signType": res.data.signType, //微信签名方式:MD5
            "paySign": res.data.paySign, //微信签名
            success: function (res) {
              setTimeout(() => {
                _this.paymentClickFlag = true
                _this.amount = ""
                _this.paymentStyle = 'background-color:#1777ff'

              }, 1000)
              _this.queryClick(sn)
            },
            fail: function (err) {
              setTimeout(() => {
                _this.paymentClickFlag = true
                _this.paymentStyle = 'background-color:#1777ff'
              }, 1000)
              _this.queryClick(sn)
            }
          })
          // #endif
        })
        // this.submit('202202233')
        // #ifdef MP-ALIPAY
        my.tradePay({
          // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
          tradeNO: '201711152100110410533667792',
          success: (res) => {
            my.alert({
              content: JSON.stringify(res),
            });
          },
          fail: (res) => {
            my.alert({
              content: JSON.stringify(res),
            });
          }
        });
        // #endif
    },
    queryClick(sn) {
      query({sn: sn}).then(res => {
        console.log(res,)
        if (res.data.return_code == '0000') {
          uni.showToast({
            icon: "none",
            title: '支付成功',
            duration: 2000
          })
          uni.navigateTo({
            url: '/pages/payment/paymentSuccessful?amount='+this.amount,
          })
        } else {
          this.amount = ""
          uni.showToast({
            icon: "none",
            title: "支付失败",
            duration: 2000
          })
        }
      }).catch(error => {
        uni.showToast({
          icon: "none",
          title: error.content,
          duration: 2000
        })
      })
    },
    inputClick() {
      this.sysScroll = false
      if (this.amount != "") {
        this.paymentStyle = 'background-color:#1777ff'
      }
      if (this.amount == "") {
        this.paymentStyle = 'background-color:#bad6fd'
      }
    },
    inputFocus() {
      var query = uni.createSelectorQuery().in(this)
      query.select('#input-text').boundingClientRect(data => {
        this.inputWrpa = '20rpx'
        this.cursor = true
      }).exec();
    },
    Listeningfocus() {
      var query = uni.createSelectorQuery().in(this)
      query.select('#input-text').boundingClientRect(data => {
        this.inputWrpa = ''
        this.cursor = false
      }).exec();
      this.KeyboardHeight = 0
      this.sysScroll = true
    },
    inputDialogToggle() {
      this.$refs.inputDialog.open()
    },
    dialogInputConfirm(e) {
      this.inputDialogToggleText = e
    },
  }
}
</script>
<style>
page {
  height: 100%;
  background-color: #f6f6f6;
}
</style>
<style scoped lang="scss">
.payment-button{
  width: 100%;
  background-color:transparent;
  border: none
}
.payment-button::after{
  border: none;
  border-radius: 0;
}
/deep/ .uicon-arrow-left{
  font-size: 32rpx!important;
}
/deep/.u-navbar__content{
  background-color: #f6f6f6!important;
}
///deep/.u-navbar__content__left{
//	display: none!important;
//}
/deep/ .u-status-bar{
  background-color: #f6f6f6!important;;
}

//input样式
.searchView {
  width: 100%;
  position: relative;
}
.searchView .searchStyle {
  width: 63%;
  padding: 0 60rpx 0 orpx;
  box-sizing: border-box;
  color: black;
  font-size: 28rpx;
  border-radius: 38rpx;
  position: relative;
  left: 20rpx;
}
.searchView .searchIcon {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 10rpx;
  right: 30.5%;
  cursor: pointer;
}

.keyboard-content{
  width: 100%;
  height: 30px;
  position: relative;
  .placeholder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color:#c0c4cc;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 30px;
    font-weight: bold;
    &.zIndex{
      z-index: 999;
    }
    #text{
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
    }
    .line{
      display: inline-block;
      width: 4rpx;
      height: 30px;
      border: 2rpx;
      background-color: #0063E5;
      margin-left: 8rpx;
      animation:cursorImg 1s infinite steps(1, start);
      @keyframes cursorImg {
        0%, 100% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }
    }
  }
}

//input样式
.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 90rpx;
  height: 90rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

.head-ortrait {
  width: 90rpx;
  height: 90rpx;
}

.head-ortrait image {
  width: 100%;
  height: 100%;
}

.head-wrap {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
}

.name {
  font-size: 32rpx;
}

.amount {
  margin-top: 70rpx;
  width: 100%;
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.wrap {
  height: 100%;
  padding-left: 40rpx;
  padding-right: 40rpx;
  overflow: hidden;
}

.name-wrap {
  margin-left: 30rpx;

}

uni-page-body {
  height: 100% !important;
}

.amount-top {
  margin-top: 70rpx;
  margin-left: 20rpx;
  display: flex;
  align-items: center;
}

.amount-title {
  font-size: 60rpx;
}


.glide {
  margin: 50rpx 20rpx 0rpx 20rpx;
  border-bottom: 1px solid #f6f6f6;
}

.saveMoney-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110rpx;
  height: 35rpx;
  background-color: #fddcc8;
}

.amount-bottom {
  margin-left: 20rpx;
  height: 100rpx;
  display: flex;
  align-items: center;

}

.saveMoney {
  font-size: 20rpx;
  color: #fb7830;
  letter-spacing: 2rpx;
}

.saveMoney-title {
  color: #d2570e;
  font-size: 30rpx;
}

.saveMoney-title-wrap {
  margin-left: 20rpx;
  display: flex;
  align-items: center;
}

.remarks {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.remarks-text {
  margin-bottom: 40rpx;
  height: 50rpx;
  font-size: 27rpx;
  color: #3a6093;
}

.remarks {
  width: 666rpx;
  position: fixed;
  bottom: 0;
}

.good-detail-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .cover {
    height: 320rpx;
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .image {
      width: 260rpx;
      height: 260rpx;
    }

    .btn-group {
      position: absolute;
      right: 10rpx;
      top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }

  .detail {
    width: 100%;
    min-height: 1vh;
    max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

    .wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .basic {
        padding: 0 20rpx 30rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: $font-size-base;
          color: $text-color-base;
          margin-bottom: 10rpx;
        }

        .tips {
          font-size: $font-size-sm;
          color: $text-color-grey;
        }
      }

      .properties {
        width: 100%;
        border-top: 2rpx solid $bg-color-grey;
        padding: 10rpx 30rpx 0;
        display: flex;
        flex-direction: column;

        .property {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 30rpx;
          padding-bottom: -16rpx;

          .title {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20rpx;

            .name {
              font-size: 26rpx;
              color: $text-color-base;
              margin-right: 20rpx;
            }

            .desc {
              flex: 1;
              font-size: $font-size-sm;
              color: $color-primary;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .values {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .value {
              border-radius: 8rpx;
              background-color: $bg-color-grey;
              padding: 16rpx 30rpx;
              font-size: 26rpx;
              color: $text-color-assist;
              margin-right: 16rpx;
              margin-bottom: 16rpx;

              &.default {
                background-color: $color-primary;
                color: $text-color-white;
              }
            }
          }
        }
      }
    }
  }

  .action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $bg-color-grey;
    height: 120rpx;
    padding: 0 26rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 20rpx;
      overflow: hidden;

      .price {
        font-size: $font-size-lg;
        color: $text-color-base;
      }

      .props {
        color: $text-color-assist;
        font-size: 24rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .btn-group {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .number {
        font-size: $font-size-base;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
      }

      .btn {
        padding: 0;
        font-size: $font-size-base;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 100%;
      }
    }
  }

  .add-to-cart-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $color-primary;
    color: $text-color-white;
    font-size: $font-size-base;
    height: 80rpx;
    border-radius: 0 0 12rpx 12rpx;
  }
}

/deep/ .u-input__content__field-wrapper__field.data-v-fdbb9fe6 {
  font-size: 60rpx!important;
}

/deep/ .amount-input  {
  height: 60rpx!important;
  line-height: 60rpx!important;
  margin-left: 20rpx;
  font-size:54rpx;
  color: black;
}
.uni-dialog-button-text{
  color: #007aff!important;
}
.payment-text{
  font-size: 32rpx;
  color: white;
}
.payment{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90rpx;
  background-color:#bad6fd;
  border-radius: 6rpx;
  margin-bottom: 30rpx;
}
.tips{
  display: flex;
  justify-content: flex-end;
  margin-right: 5rpx;
  margin-top: 5rpx;
}
/deep/ .uni-popup-dialog{
  margin-bottom: 300rpx;
}
/deep/ .uni-easyinput__content-input{
  font-size: 42rpx!important;
}

/deep/ .is-input-border {
  border:none!important;
}
/deep/ .uni-easyinput {
  width:550rpx!important;
}
/deep/ .uni-dialog-title-text  {
  color: black!important;
  font-weight: bold;
}

/deep/ .u-navbar__content__left {
  display: none!important;
}
.payment-view{
  background-color:#1777ff
}

</style>
<style scoped lang="scss">
.prompt {
	padding-top: 20rpx;
}
.prompt-item{
  padding-left: 20rpx;
  padding-bottom: 20rpx;
}
.prompt-item-companyName{
  padding-left: 20rpx;
  font-size: 26rpx;
}
.prompt-item-company{
  color:#9b9a98;
  font-size: 26rpx;
}
/deep/ .uni-icons {
  font-size: 42rpx!important;
}
/deep/ .uni-easyinput__content-input.data-v-abe12412 {
  position: absolute;
}
/deep/ .content-clear-icon.data-v-abe12412 {
  position: absolute;
  right: 0;
}

@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}

.box {
  @include flex;
}

.button {
  @include flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
}

.example-body {
  background-color: #fff;
  padding: 10px 0;
}

.button-text {
  color: #fff;
  font-size: 12px;
}

.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}

.popup-height {
  @include height;
  width: 200px;
}

.text {
  font-size: 12px;
  color: #333;
}

.popup-success {
  color: #fff;
  background-color: #e1f3d8;
}

.popup-warn {
  color: #fff;
  background-color: #faecd8;
}

.popup-error {
  color: #fff;
  background-color: #fde2e2;
}

.popup-info {
  color: #fff;
  background-color: #f2f6fc;
}

.success-text {
  color: #09bb07;
}

.warn-text {
  color: #e6a23c;
}

.error-text {
  color: #f56c6c;
}

.info-text {
  color: #909399;
}

.dialog,
.share {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.dialog-box {
  padding: 10px;
}

.dialog .button,
.share .button {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  margin: 0;
  margin-top: 10px;
  padding: 3px 0;
  flex: 1;
}

.dialog-text {
  font-size: 14px;
  color: #333;
}
</style>
